<template>
  <div class="statistics-page">
    <!-- 收入累计 -->
    <div class="income-statistics">
      <div class="income-card" style="background-color: #90EE90;">
        <p>{{ data.totalIncome }}</p>
        <p>收入累计(元)</p>
      </div>
      <div class="income-card" style="background-color: #FFA07A;">
        <p>{{ data.totalIncome }}</p>
        <p>收入累计(元)</p>
      </div>
      <div class="income-card" style="background-color: #ADD8E6;">
        <p>{{ data.totalIncome }}</p>
        <p>收入累计(元)</p>
      </div>
    </div>

    <!-- 收入统计图表 -->
    <div class="chart-container">
      <div class="chart-title">
        <span>收入统计</span>
        <button @click="toggleChart('week')">近7日</button>
        <button @click="toggleChart('month')">近一个月</button>
      </div>
      <div id="income-chart"></div>
      <p class="total-income">近7日总收入：{{ totalIncome }}</p>
    </div>

    <!-- 注册、关注量图表 -->
    <div class="chart-container">
      <div class="chart-title">
        <span>注册、关注量</span>
        <button @click="toggleChart('week')">近7日</button>
        <button @click="toggleChart('month')">近一个月</button>
      </div>
      <div id="registration-chart"></div>
      <div class="user-stats">
        <p>近7日注册人数：{{ registrationCount }}</p>
        <p>近7日关注人数：{{ followerCount }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts';

// 假设这是从后端获取的数据
const data = {
  income: [120, 200, 150, 80, 70, 110, 130],
  registration: [120, 200, 150, 80, 70, 110, 130],
  followers: [100, 150, 120, 180, 160, 140, 120],
  totalIncome: 639.58,
  registrationCount: 12345,
  followerCount: 1234,
};

const toggleChart = (type) => {
  const chartType = type === 'week' ? '周' : '月';
  generateIncomeChart(chartType);
  generateRegistrationChart(chartType);
};

const generateIncomeChart = (chartType) => {
  console.log('Generating income chart');
  // 使用data.income数组作为图表数据
  const chartDom = document.getElementById('income-chart');
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: '收入统计',
      left: 'center'
    },
    tooltip: {},
    xAxis: {
      data: ['8.26', '8.27', '8.28', '8.29', '8.30', '8.31', '9.01']
    },
    yAxis: {},
    series: [
      {
        name: '收入',
        type: 'line',
        data: data.income
      }
    ]
  };

  if (option && typeof option === 'object') {
    myChart.setOption(option);
  }

  window.addEventListener('resize', () => myChart.resize());
};

const generateRegistrationChart = (chartType) => {
  console.log('Generating registration chart');
  // 使用data.registration和followers数组作为图表数据
  const chartDom = document.getElementById('registration-chart');
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: '注册、关注量',
      left: 'center'
    },
    tooltip: {},
    legend: {
      data: ['注册人数', '关注人数']
    },
    xAxis: {
      data: ['8.26', '8.27', '8.28', '8.29', '8.30', '8.31', '9.01']
    },
    yAxis: {},
    series: [
      {
        name: '注册人数',
        type: 'bar',
        data: data.registration
      },
      {
        name: '关注人数',
        type: 'bar',
        data: data.followers
      }
    ]
  };

  if (option && typeof option === 'object') {
    myChart.setOption(option);
  }

  window.addEventListener('resize', () => myChart.resize());
};

// 在组件挂载时自动调用图表生成函数
onMounted(() => {
  toggleChart('week');
});
</script>

<style scoped>
.statistics-page {
  padding: 20px;
}

.income-statistics {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.income-card {
  width: 200px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: white;
  font-size: 18px;
  margin: 10px; /* 默认间距 */
}

@media (min-width: 768px) {
  .income-card {
    margin: 15px; /* 在平板及以上设备上增加间距 */
  }
}

@media (min-width: 1024px) {
  .income-card {
    margin: 20px; /* 在桌面及以上设备上进一步增加间距 */
  }
}

.chart-container {
  margin-bottom: 20px;
}

.chart-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

#income-chart, #registration-chart {
  width: 100%;
  height: 400px;
}

.user-stats p {
  margin: 5px 0;
}
</style>
